<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useAuthStore} from '@/stores/auth_store.ts'
import type {FormInst, FormRules} from "naive-ui";

const router = useRouter()
const authStore = useAuthStore()
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = ref({
  username: 'shangguan',
  password: 'shangguan5018'
})

// 加载状态
const loading = ref(false)
const rules: FormRules = {
  username: [
    {
      required: true,

      trigger: ['input', 'blur']
    }
  ],
  password: [
    {
      required: true,
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('请输入密码')
        }
        return true
      },
      message: '请输入密码'
    }
  ],
}

async function handleLogin() {
  if (!formData.value.username || !formData.value.password) {
    window.$notification.error({
      title: '输入错误',
      content: '请填写完整的登录信息',
      duration: 3000
    })
    return
  }

  try {
    loading.value = true
    await authStore.login(formData.value.username, formData.value.password)

    window.$notification.success({
      title: '登录成功',
      content: `欢迎回来，${authStore.userInfo?.username}`,
      duration: 2000
    })
    const userInfo = authStore.userInfo;
    let defaultRoleProcess: Role.BaseInfo = {};
    if (userInfo) {
      const defaultRole = userInfo.defaultRole;
      const roles: Role.BaseInfo = authStore.roles;
      for (let index in roles) {
        if (roles[index].roleId === defaultRole) {
          defaultRoleProcess = {
            ...roles[index]
          }
        }
      }
    }
    // 跳转到重定向路径或默认首页
    await router.push({
      path: defaultRoleProcess.home?.route?.path || '/home'
    })
  } catch (error) {
    window.$notification.error({
      title: '登录失败',
      content: (error as Error).message || '请检查您的用户名和密码',
      duration: 3000
    })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login-card">
      <h1 class="title">系统登录</h1>

      <n-form class="login-form" ref="formRef" :rules="rules">
        <n-form-item label="用户名" required>
          <n-input
            v-model:value="formData.username"
            placeholder="请输入用户名"
            :disabled="loading"
            @keyup.enter="handleLogin"
          />
        </n-form-item>

        <n-form-item label="密码" required>
          <n-input
            v-model:value="formData.password"
            type="password"
            placeholder="请输入密码"
            :disabled="loading"
            show-password-on="click"
            @keyup.enter="handleLogin"
          />
        </n-form-item>

        <n-button
          type="primary"
          :loading="loading"
          :disabled="!formData.username || !formData.password"
          @click="handleLogin"
          block
        >
          {{ loading ? '登录中...' : '立即登录' }}
        </n-button>
      </n-form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.title {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
  font-size: 1.8rem;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
</style>
